<template>
  <div class="cl-chart" ref="chartDom"></div>
</template>
<script setup>
import { onMounted, watch, ref, toRaw } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  sourceData: {
    type: Object,
    default: () => {}
  }
})

const chartDom = ref(null)
let myChart
const echartsInit = () => {
  myChart = echarts.init(chartDom.value)
}
const echartsetOption = (param1, param2) => {
  const color = [
    ['rgba(255, 87, 15, 1)', 'rgba(255, 98, 31, 1)'],
    ['rgba(8, 214, 129, 1)', 'rgba(5, 187, 112, 1)'],
    ['rgba(3, 170, 220, 1)', 'rgba(14, 199, 255, 1)']
  ]
  let _series = []

  for (let i = 0; i < param2.length; i++) {
    const colorIndex = i % 3
    _series.push({
      type: 'bar',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: color[colorIndex][0] // 0% 处的颜色
            },
            {
              offset: 1,
              color: color[colorIndex][1] // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      },
      ...param2[i]
    })
  }
  let option = {
    legend: {
      show: true,
      right: '0%',
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      show: false,
      top: '20%',
      bottom: '2%',
      left: '3%',
      right: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLine: {
        show: false,
        lineStyle: {
          color: 'red'
        }
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      axisLabel: {
        show: true,
        color: '#fff'
      },
      data: param1 || []
    },
    yAxis: {
      type: 'value',
      name: '单位/kg',
      nameTextStyle: {
        color: '#fff',
        align: 'right'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(229, 243, 247, 0.2)'
        }
      },
      axisLabel: {
        show: true,
        color: '#fff'
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    series: _series
  }
  if (myChart) {
    myChart.clear()
    myChart.setOption(option)
  }
}
onMounted(() => {
  echartsInit()
})

watch(
  () => props.sourceData,
  (newValue) => {
    const _newValue = toRaw(newValue)
    const _keys = Object.keys(_newValue)
    let _series = []

    let nameType = {}

    for (let i = 0; i < _keys.length; i++) {
      const row = _newValue[_keys[i]]
      for (let j = 0; j < row.length; j++) {
        if (!nameType[row[j].cropName]) {
          nameType[row[j].cropName] = {
            name: row[j].cropName
          }
          nameType[row[j].cropName].data = new Array(i).fill('')
          nameType[row[j].cropName].data.push(row[j].cropWeight)
        } else {
          nameType[row[j].cropName].data.push(row[j].cropWeight)
        }
      }
      for (let k in nameType) {
        if (nameType[k].data.length < i + 1) {
          nameType[k].data.push('')
        }
      }
    }

    for (let n in nameType) {
      _series.push(nameType[n])
    }

    myChart && echartsetOption(_keys, _series)
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
.cl-chart {
  width: 100%;
  height: 100%;
}
</style>
